<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>弹窗单体模式原理</title>
</head>
<body>
	<h1 id='modalHandle'>弹窗单体模式原理</h1>
</body>
<script type="text/javascript">

    function CreateModal(){
        
    }

    CreateModal.prototype.modalShow=function(isShow,html){
        var div;
        if(!div){
            div = document.createElement('div');
            div.style.display = isShow?'block':'none';
            div.style.width = '200px';
            div.style.height = '200px';
            div.style.background = 'red';
            div.innerHTML = html;
            document.body.appendChild(div);

            setTimeout(function(){
                div.style.display = 'none'
            },1000)
        }
        return div
    }

    const cModal = new CreateModal('哈哈')

    var modalHandle = document.getElementById('modalHandle');

    modalHandle.onclick=function(){
        cModal.modalShow(true)
    }
</script>
</html>